<!-- 回看付费课程 底部弹出面板 -->
<template>
    <div>
        <header class="header">
            <div class="left">
                <div class="course_list_title">
                    <span class="title"> {{courseInfo.title || '课程'}} </span>
                    <span class="lesson_info">{{ compLessonInfo }}</span>
                </div>
            </div>
            <img class="right" src="@/assets/images/zxyh-close.png" alt="" @click="closePop">
        </header>
        <div class="content">
            <CourseList :courseInfo="courseInfo" />
        </div>
    </div>
</template>
<script>
import CourseList from '@/components/zxjtqh/CourseList.vue';
export default {
    props: ['courseInfo'],
    components: {
        CourseList,
    },
    data() {
        return {
        }
    },
    created() {
    },
    computed: {
        compLessonInfo() {
            const { hasFinishLessonNum, totalLessonNum } = this.courseInfo;
            if (totalLessonNum && totalLessonNum !== 1) {
                return `（共${hasFinishLessonNum}/${totalLessonNum}节）`;
            } else {
                return `（更新至${hasFinishLessonNum > 9 ? hasFinishLessonNum : '0' + hasFinishLessonNum}节）`;
            }
        }
    },
    methods: {
        closePop() {
            this.$emit("formChildMsg", {
                type: "closeVantPopup",
            });
        }
    },
}

</script>
<style lang="less" scoped>
.header {
    width: 100%;
    height: 70px;
    padding: 30px 30px 0;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;

    &.type1 {
        background: #F9F9F9;
    }

    .left {
        
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .course_list_title{
            display: flex;
            align-items: center;
            .title {
            color: #333;
            font-size: 36px;
            width: 60vw;//先定宽
            white-space:nowrap; //溢出不换行
            overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
        }
        }
        

        .lesson_info {
            color: #FF7A00;
            font-size: 26px;
        }
    }

    .right {
        width: 32px;
        height: 32px;
        font-size: 0;
    }
}

.content {
    padding: 10px;
    height: 500px;
    overflow-y: scroll;

    /deep/ .course_list {
        margin-top: -72px;
    }
}
</style>